<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<style>
		body {
			margin: 0;
		}

		/* 上面 */
		.el-header {
			border-bottom: 1px solid #606060;
			background-image: linear-gradient(to right, #409EFF 0%, #00ff00 100%);
		}

		/* 左边 */
		.el-aside {
			border-right: 1px solid #606060;
			position: absolute;
			top: 60px;
			bottom: 0px;
		}

		/* 右边 */
		.el-main {
			/* border: 1px solid green; */
			position: absolute;
			top: 60px;
			bottom: 0px;
			left: 200px;
			right: 0px;
			padding: 0;
		}
		#tc{
			position: absolute;
			right: 50px;
		}
	</style>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<div>Header</div>
					登录用户:<span style="color: red;">{{tit.uname}}</span>
					<span id="tc"><a href="#" @click="tc">退出</a> </span>
				</el-header>
				<el-container>
					<el-aside width="200px">
						<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
							default-expand-all >
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span>
									<i :class="data.imgicon">
									</i>
									{{node.label}}
								</span>
							</span>
							</el-tree>
					</el-aside>
					<el-main>
						<iframe :src="src" frameborder="0" width="100%" height="99%"></iframe>
					</el-main>
				</el-container>
				
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				src: "index.html",
				treedata: [{
					label: '一级 1',
					href: "",
					children: [{
						label: 'test',
						href: "test.html",
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				tit:{
					id:'',
					uname:'',
					upwd:''
				},
			},
			methods: {
				getUserInfo() {
					// const params = new URLSearchParams(window.location.search);
					// const userid = params.get('userid');
					// console.log(userid);
					var that = this;
					axios.get(API+'getMenuById')
					// axios.get(API+'selectusermenu')
						.then(function(res) {
							console.log(res);
							var s = arrayToTree(res.data.data.menus);
							console.log(s);
							that.treedata = s;
							// that.treedata = res.data.data.menus;
						}).catch(err => {
							console.error(error);
						});
				},
				handleNodeClick(data) {
					this.src = data.href;
					console.log(data.href);
				},
				getById(){
					var that = this;
					axios.get(API+"selectById")
					.then(function(res){
						console.log(res);
						that.tit =	res.data.data.user;
					})
				},
				tc(){
					window.localStorage.removeItem("token");
					window.location.href = 'login.html';
				}
			},
			mounted() {
				//生命周期函数 挂载后执行
				this.getUserInfo(); //初始化获取树的数据
				this.getById();
			}
		})
	</script>
</html>